<!DOCTYPE html>
<html lang="en">
<!-- head中标签不会在页面中显示，作用是保存页面元数据 -->

<head>
  <!-- 网页元数据 -->
  <!-- 指定字符编码 utf-8 -->
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- 文档标题，浏览器标签处显示 -->
  <title>Document</title>
</head>
<style>
  body {
    display: flex;
  }

  .inline-box {
    flex: 1;
  }

  a {
    display: block;
  }
</style>

<body>
  <!-- 一、文字 -->
  <div class="inline-box">
    <!-- 标题标签 由大到小 -->
    <h1>h1标签</h1>
    <h2>h2标签</h2>
    <h3>h3标签</h3>
    <h4>h4标签</h4>
    <h5>h5标签</h5>
    <!-- 段落标签 -->
    <p>p段落标签</p>
    <!-- 无语义标签 一般用于非标题和段落 -->
    <span>span无语义标签</span>
    <!-- 斜线 -->
    <p><em>斜线</em></p>
    <!-- 粗体 -->
    <strong>粗体</strong></p>
    <!-- HTML5 粗体-->
    <p><b>html5 粗体</b></p>
    <!-- HTML5 斜体-->
    <p><i>html5 斜体</i></p>
    <!-- HTML5 下划线-->
    <p><u>html5 下划线</u></p>
  </div>


  <!-- 二、列表 -->
  <div class="inline-box">
    <!-- 无序列表 -->
    <ul>
      <li>无序1</li>
      <li>无序2</li>
      <li>无序3</li>
    </ul>
    <!-- 有序列表 (设置起始值) -->
    <ol start="10">
      <li>有序1</li>
      <li>有序2</li>
      <li>有序3</li>
    </ol>
    <!-- 嵌套列表 -->
    <ol>
      <li>红</li>
      <ul>
        <li>红紫</li>
        <li>红黑</li>
      </ul>
      <li>蓝</li>
    </ol>
  </div>
  <!-- 超链接 -->
  <div class="inline-box">
    <a href="http://www.baidu.com">普通链接</a>
    <a href="http://www.baidu.com" title="链接到百度">链接(鼠标悬浮提示)</a>
    <!-- 块级链接 -->
    <a
      href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201109%2F24%2F1428374l8otjxqr9uz4mil.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632790576&t=dfa14a2c144ad0e936b1a40e488c6a6d">
      <img style="max-width: 100px;"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201109%2F24%2F1428374l8otjxqr9uz4mil.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632790576&t=dfa14a2c144ad0e936b1a40e488c6a6d" />
    </a>
  </div>

  <!-- 换行 水平分割线 -->
  <div class="inline-box">
    <p>换<br>行</p>
    <hr>
    <p>哎呀呀 被分割了</p>
  </div>

</body>

</html>